<template>
	<view class="authentication-car-owner">
		<view class="page-tip">完善以下资料并通过认证，就可以接单啦！</view>
		<view class="process">
			<view class="item" :class="{selected: cur >= 1}">
				<view class="number">1</view>
				<view class="label">身份证</view>
			</view>
			<view class="item" :class="{selected: cur >= 2}">
				<view class="number">2</view>
				<view class="label">驾驶证</view>
				<view class="line"></view>
			</view>
			<view class="item" :class="{selected: cur >= 3}">
				<view class="number">3</view>
				<view class="label">车辆信息</view>
				<view class="line"></view>
			</view>
			<view class="item" :class="{selected: cur >= 4}">
				<view class="number">4</view>
				<view class="label">其他资料</view>
				<view class="line"></view>
			</view>
		</view>
		
		<xzfx-panel v-if="cur === 1" :showTitle="false" :isCard="true">
			<view slot="content">
				<view class="upload-panel">
					<view class="upload-panel-title">手持身份证人像面<text>(必传)</text></view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImageDriverId" class="upload-panel-tip" @click.stop="uploadFn('truckImageDriverId')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 手持身份证人像面图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImageDriverId"></image>
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel v-if="cur === 2" :showTitle="false" :isCard="true">
			<view slot="content">
				<view class="upload-panel">
					<view class="upload-panel-title">驾驶证主页<text>(必传)</text></view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImageDriverFront" class="upload-panel-tip" @click.stop="uploadFn('truckImageDriverFront')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 驾驶证主页图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImageDriverFront"></image>
					</view>
				</view>
				<view class="upload-panel">
					<view class="upload-panel-title">驾驶证副页</view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImageDriverBack" class="upload-panel-tip" @click.stop="uploadFn('truckImageDriverBack')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 驾驶证副页图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImageDriverBack"></image>
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel v-if="cur === 3" :showTitle="false" :isCard="true">
			<view slot="content">
				<view class="upload-panel">
					<view class="upload-panel-title">行驶证主页<text>(必传)</text></view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImageDrivingFront" class="upload-panel-tip" @click.stop="uploadFn('truckImageDrivingFront')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 行驶证主页图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImageDrivingFront"></image>
					</view>
				</view>
				<view class="upload-panel">
					<view class="upload-panel-title">行驶证副页</view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImageDrivingBack" class="upload-panel-tip" @click.stop="uploadFn('truckImageDrivingBack')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 行驶证副页图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImageDrivingBack"></image>
					</view>
				</view>
				<view class="upload-panel">
					<view class="upload-panel-title">车辆照片<text>(必传)</text></view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImage1" class="upload-panel-tip" @click.stop="uploadFn('truckImage1')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 车辆头部图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImage1"></image>
					</view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImage2" class="upload-panel-tip" @click.stop="uploadFn('truckImage2')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 车辆侧面图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImage2"></image>
					</view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImage3" class="upload-panel-tip" @click.stop="uploadFn('truckImage3')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 车辆尾部图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImage3"></image>
					</view>
				</view>
			</view>
		</xzfx-panel>
		<xzfx-panel v-if="cur === 4" :showTitle="false" :isCard="true">
			<view slot="content">
				<view class="upload-panel">
					<view class="upload-panel-title">营运证</view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImageService" class="upload-panel-tip" @click.stop="uploadFn('truckImageService')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 营运证图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImageService"></image>
					</view>
				</view>
				<view class="upload-panel">
					<view class="upload-panel-title">保险证明</view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImageInsure" class="upload-panel-tip" @click.stop="uploadFn('truckImageInsure')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 保险证明图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImageInsure"></image>
					</view>
				</view>
				<view class="upload-panel">
					<view class="upload-panel-title">其他证件</view>
					<view class="upload-panel-box">
						<view v-if="!form.truckImageOther" class="upload-panel-tip" @click.stop="uploadFn('truckImageOther')">
							<view class="upload-panel-icon xzfx_icon_paizhao"></view>
							<view class="upload-panel-text">点击上传 其他证件图片</view>
						</view>
						<image v-else class="upload-panel-image" :src="form.truckImageOther"></image>
					</view>
				</view>
			</view>
		</xzfx-panel>
		<view v-if="cur === 4" class="submit-button" @click.stop="submitFn">立即认证</view>
		<view v-else-if="cur === 1" class="submit-button" @click="nextFn">下一步</view>
		<view v-else style="display: grid;grid-template-columns: repeat(2, 1fr);">
			<view v-if="cur !== 1" class="submit-button" @click="cur = cur - 1" style="background-color: #999;">上一步</view>
			<view class="submit-button" @click="nextFn">下一步</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				e: null,
				cur: 1,
				form: {
					truckImageDriverId: "",
					truckImage1: "",
					truckImage2: "",
					truckImage3: "",
					truckImageDrivingFront: "",
					truckImageDrivingBack: "",
					truckImageDriverFront: "",
					truckImageDriverBack: "",
					truckImageService: "",
					truckImageInsure: "",
					truckImageOther: ""
				},
				tips: {
					truckImageDriverId: "请上传手持身份证人像面图片",
					truckImage1: "请上传车辆头部图片",
					truckImage2: "请上传车辆侧面图片",
					truckImage3: "请上传车辆尾部图片",
					truckImageDrivingFront: "请上传行驶证主页图片",
					truckImageDriverFront: "请上传驾驶证主页图片"
				}
			};
		},
		onLoad(e) {
			this.e = e;
		},
		methods: {
			nextFn(){
				if(this.cur === 1){
					if(this.form.truckImageDriverId){
						this.cur = this.cur + 1;
						return
					}else{
						this.$utils.system.tip("请上传手持身份证人像面图片");
						return
					}
				}
				if(this.cur === 2){
					if(this.form.truckImageDriverFront){
						this.cur = this.cur + 1;
						return
					}else{
						this.$utils.system.tip("请上传驾驶证主页图片");
						return
					}
				}
				if(this.cur === 3){
					if(!this.form.truckImageDrivingFront){
						this.$utils.system.tip("请上传驾驶证主页图片");
					}else if(!this.form.truckImage1){
						this.$utils.system.tip("请上传车辆头部图片");
					}else if(!this.form.truckImage2){
						this.$utils.system.tip("请上传车辆侧面图片");
					}else if(!this.form.truckImage3){
						this.$utils.system.tip("请上传车辆尾部图片");
					}else{
						this.cur = this.cur + 1
					}
				}
			},
			uploadFn(key){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					extension: ['.jpg', '.png', '.jpeg'],
					success: (res) => {
						this.$utils.system.loading("上传中，请稍后");
						uni.uploadFile({
							url: 'https://api.sxbchr.com/bchr/app/config/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								"X-Access-Token": uni.getStorageSync("token") || ""
							},
							success: (response) => {
								if(response.statusCode === 200){
									let data = JSON.parse(response.data)
									if(data.code === 200){
										this.form[key] = data.message
									}else{
										this.$utils.system.tip("上传失败");
									}
								}else{
									this.$utils.system.tip("上传失败");
								}
							},
							fail: (error) => {
								this.$utils.system.tip("上传失败");
							},
							complete: () => {
								uni.hideLoading()
							}
						});
					}
				});
			},
			submitFn(){
				let keys = Object.keys(this.tips);
				for (var i = 0; i < keys.length; i++) {
					if(!this.form[keys[i]]){
						this.$utils.system.tip(this.tips[keys[i]]);
						return
					}
				}
				let obj = JSON.parse(JSON.stringify(this.form))
				obj.truckImages = [obj.truckImage1, obj.truckImage2, obj.truckImage3].join(",");
				delete obj.truckImage1;
				delete obj.truckImage2;
				delete obj.truckImage3;
				this.$utils.system.loading("正在提交认证，请稍后");
				this.$apis.authentication.carOwner(obj).then(res => {
					this.$utils.system.tip('提交成功，等待审核');
					this.$apis.user.getInfo().then(res => {
						uni.setStorageSync("userInfo", res);
					}).catch(err => {
						console.log(err)
					})
					setTimeout(() => {
						uni.navigateBack({ delta: Number(this.e.delta) });
					}, 3000);
				}).catch(err => {
					console.log(err);
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading();
					}, 3000)
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff !important;
	}
	.authentication-car-owner{
		padding-bottom: 50rpx;
		.upload-panel{
			margin-top: 25rpx;
			.upload-panel-title{
				position: relative;
				color: #666666;
				font-size: 30rpx;
				padding-bottom: 15rpx;
				text{
					font-size: 28rpx;
					color: $xzfx-theme;
					padding-left: 5rpx;
				}
			}
			.upload-panel-box{
				.upload-panel-tip{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					border: 2rpx dashed #f5f5f5;
					border-radius: 20rpx;
					height: 300rpx;
					.upload-panel-icon{
						font-size: 100rpx;
						color: $xzfx-theme;
					}
					.upload-panel-text{
						color: #999999;
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}
				.upload-panel-image{
					width: auto;
					height: 300rpx;
					display: block;
				}
			}
			.upload-panel-box:nth-child(3),
			.upload-panel-box:nth-child(4){
				margin-top: 20rpx;
			}
		}
		.upload-panel:first-child{
			margin-top: 0;
		}
	}
	.page-tip{
		margin: $xzfx-spacing;
		font-size: 30rpx;
		color: #333;
	}
	.process{
		margin: 50rpx $xzfx-spacing;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		.item{
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 0 10rpx;
			.number{
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				color: #999999;
				background-color: #eeeeee;
			}
			.label{
				font-size: 32rpx;
				color: #666666;
				margin-top: 10rpx;
			}
			.line{
				position: absolute;
				top: 30rpx;
				right: calc(50% + 30rpx);
				width: calc(100% - 60rpx);
				height: 4rpx;
				background-color: #eeeeee;
			}
		}
		.selected{
			.number{
				color: #ffffff;
				background-color: $xzfx-theme;
			}
			.label{
				color: #000000;
			}
			.line{
				background-color: $xzfx-theme;
			}
		}
	}
	
	/deep/ .xzfx-panel{
		margin: 0 !important;
	}
	
	.submit-button{
		margin: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-radius: 46rpx;
		background: $xzfx-theme;
		color: #FFFFFF;
		font-size: 32rpx;
		padding: 0 40rpx;
		overflow: hidden;
	}
	
</style>
